/* TODO
 *
 * - External CSS (no sense to make it in code, use only jQuery for dynamic stuff!
 * - Align text in DIV center (same height as icon)
 * - Allow only one instance
 * - Add width property (min/max) with nicely styled jQuery UI sliders!
 * - Allow editor to be dragged
 * - Implement close
 * - Think of which properties to support, do a from to slider for evolution!
 * */

/** The editor controller */
function EditorController(model){

    /* Store a reference to the model */
    this.model = model;

    /* the currently selected element */
    this.targetElement = null;

    /* Define the editor structure */
    this.editorHTML = '' +
        '<div class="evo component" id="editor">' +
            '<div class="evo component" id="title">EVOLVER 1.2</div> ' +
            '<div class="evo editorElement component" id="addRule"><img class="evo icon" src="framework/ico/add.png" alt="Add">ADD RULE</div> ' +
            '<div class="evo component" id="propertyEditor">' +
                '<div class="evo component propertyRule" id="width">WIDTH</div>' +
                '<div class="evo component propertyRule" id="height">HEIGHT</div>' +
                '<div class="evo component propertyRule" id="margin-left">MARGIN-LEFT</div>' +
                '<div class="evo component propertyRule" id="margin-top">MARGIN-TOP</div>' +
                '<div class="evo component propertyRule" id="padding">PADDING</div>' +
                '<div class="evo component propertyRule" id="border-radius">BORDER-RADIUS</div>' +
                '<div class="evo component propertyRule" id="background-color">BACKGROUND-COLOR</div>' +
                '<div class="evo component propertyRule" id="color">FONT-COLOR</div>' +
                '<div class="evo component propertyRule" id="font-size">FONT-SIZE</div>' +
            '</div>' + // #propertyEditor
            '<div class="evo editorElement component" id="close"><img class="evo icon" src="framework/ico/close.png" alt="Close">  CLOSE</div> ' +
        '</div>'; //#editor
}
/** Display the editor window */
EditorController.prototype.ShowEditorPanel = function(mouseX, mouseY){

    /* add the appropriate html to the document body */
    $(document.body).append(this.editorHTML);

    /* Set the editor position based on where we clicked */
    $('#editor').css('top', mouseY + 'px');
    $('#editor').css('left',mouseX + 'px');

    /* animate the opening of the editor window */
    this.ToggleEditorPanel(1.0, false);
}

/** Animate the opening of the editor */
EditorController.prototype.ToggleEditorPanel = function(targetOpacity, deleteElement){
    /* animate the appearance of the div */
    $('#editor').animate({
        opacity: targetOpacity
    }, 300, function() {
        if(deleteElement){
            $('#editor').remove();
        }
    });
}

/** Create an property modifier */
EditorController.prototype.AddPropertyEditor = function(cssRule, id){

    var model = this.model;
    var controller = this;

    /* generate the  required HTML for an editor panel */
    var editorPanel = '' +
        '<div class="evo editorElement component" id="'+ id +'">' +
            '<img class="evo icon" src="framework/ico/width.png" alt="Rules">' + cssRule.toUpperCase() + '</div>' +
            '<div class="evo component edit" id="' + id + '">' +
                'Set Bounds' +
                '<div class="slider" id="funky"></div>' +
            '</div>' +
        '</div>';

    /* append this panel to the editor */
    $(editorPanel).insertAfter('#title');

    /* create a mutation property and save it in the model */
    model.AddEvolutionProperty(new MutationProperty(this.targetElement, 10, 25, 20));

    /* create the slider */
    $('#funky').slider({
        range: true,
        values: [ 10, 25 ],
        slide: function(event, ui){ // can't use 'this' here, it doesn't reference the class!

            /* slider has changed, save new values in model */
            model.UpdateEvolutionProperty();

            /* adjust the CSS of the target element to reflect the changes, need to get the target element in the model! */
            $('#' + controller.targetElement).css(cssRule, ui.value + 'px');

            /* debug new value */
            //alert(model.evolutionProperties[0].minValue);
        }
    });
}

